<template>
    <el-dialog v-model="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()"
            label-width="120px">
            <el-form-item label="个人收藏夹名称" prop="dfvName">
                <el-input v-model="dataForm.dfvName" placeholder="收藏夹名称" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="共享对象" prop="dfvIfPublic">
                <ren-radio-group v-model="dataForm.dfvIfPublic" dict-type="share"></ren-radio-group>
            </el-form-item>
            <div v-if="dataForm.dfvIfPublic == 2">
                <el-form-item label="领导" v-if="taskleader">
                    <el-checkbox @change="handleCheckAllChange1" v-model="allStufs1">全选</el-checkbox>
                </el-form-item>
                <el-form-item style="margin-top: -20px;">
                    <el-checkbox-group v-model="dataForm.shereIdList1">
                        <el-checkbox v-for="leader in taskleader" :key="leader.userId" :label="leader.userId"
                            :value="leader.userId">
                            {{ leader.remark }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="项目经理" v-if="tskWork">
                    <el-checkbox @change="handleCheckAllChange2" v-model="allStufs2">全选</el-checkbox>
                </el-form-item>
                <el-form-item style="margin-top: -20px;">
                    <el-checkbox-group v-model="dataForm.shereIdList2">
                        <el-checkbox v-for="leader in tskWork" :key="leader.userId" :label="leader.userId"
                            :value="leader.userId">
                            {{ leader.remark }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="组长" v-if="tsgroup">
                    <el-checkbox @change="handleCheckAllChange3" v-model="allStufs3">全选</el-checkbox>
                </el-form-item>
                <el-form-item style="margin-top: -20px;">
                    <el-checkbox-group v-model="dataForm.shereIdList3">
                        <el-checkbox v-for="leader in tsgroup" :key="leader.userId" :label="leader.userId"
                            :value="leader.userId">
                            {{ leader.remark }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="数据组" v-if="tsdata">
                    <el-checkbox @change="handleCheckAllChange4" v-model="allStufs4">全选</el-checkbox>
                </el-form-item>
                <el-form-item style="margin-top: -20px;">
                    <el-checkbox-group v-model="dataForm.shereIdList4">
                        <el-checkbox v-for="leader in tsdata" :key="leader.userId" :label="leader.userId"
                            :value="leader.userId">
                            {{ leader.remark }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="工作人员" v-if="tspersonnel" v-model="allStufs5">
                    <el-checkbox @change="handleCheckAllChange5" v-model="allStufs5">全选</el-checkbox>
                </el-form-item>
                <el-form-item style="margin-top: -20px;">
                    <el-checkbox-group v-model="dataForm.shereIdList5">
                        <el-checkbox v-for="leader in tspersonnel" :key="leader.userId" :label="leader.userId"
                            :value="leader.userId">
                            {{ leader.remark }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="业务员" v-if="tasksalesman">
                    <el-checkbox @change="handleCheckAllChange6" v-model="allStufs6">全选</el-checkbox>
                </el-form-item>
                <el-form-item style="margin-top: -20px;">
                    <el-checkbox-group v-model="dataForm.shereIdList6">
                        <el-checkbox v-for="leader in tasksalesman" :key="leader.userId" :label="leader.userId"
                            :value="leader.userId">
                            {{ leader.remark }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </div>
        </el-form>
        <template v-slot:footer>
            <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
            <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t("confirm") }}</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import baseService from "@/service/baseService";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
const { t } = useI18n();
const emit = defineEmits(["refreshDataList"]);

const visible = ref(false);
const dataFormRef = ref();

const dataForm = reactive({
    id: null as any,
    dfvName: "",
    dfvIfPublic: 0,
    dfvSource: "",
    shereIdList: [] as string[],
    shereIdList1: [] as string[],
    shereIdList2: [] as string[],
    shereIdList3: [] as string[],
    shereIdList4: [] as string[],
    shereIdList5: [] as string[],
    shereIdList6: [] as string[],

})

//监听全选控制
const allStufs1 = ref(false); // 全选
const allStufs2 = ref(false); // 全选
const allStufs3 = ref(false); // 全选
const allStufs4 = ref(false); // 全选
const allStufs5 = ref(false); // 全选
const allStufs6 = ref(false); // 全选

watch(() => dataForm.shereIdList1, (newName, oldName) => {
    if (taskleader.value != null) {
        allStufs1.value = newName.length === taskleader.value.length;
    }
});
watch(() => dataForm.shereIdList2, (newName, oldName) => {
    if (tskWork.value != null) {
        allStufs2.value = newName.length === tskWork.value.length;
    }
});
watch(() => dataForm.shereIdList3, (newName, oldName) => {
    if (tsgroup.value != null) {
        allStufs3.value = newName.length === tsgroup.value.length;
    }
});
watch(() => dataForm.shereIdList4, (newName, oldName) => {
    if (tsdata.value != null) {
        allStufs4.value = newName.length === tsdata.value.length;
    }
});
watch(() => dataForm.shereIdList5, (newName, oldName) => {
    if (tspersonnel.value != null) {
        allStufs5.value = newName.length === tspersonnel.value.length;
    }
});
watch(() => dataForm.shereIdList6, (newName, oldName) => {
    if (tasksalesman.value != null) {
        allStufs6.value = newName.length === tasksalesman.value.length;
    }
});



//做校验
const rules = ref({
    dfvName: [{ required: true, message: t("validate.required"), trigger: "blur" }],
});

const init = (id?: number) => {
    visible.value = true;
    dataForm.id = id;
    shareList();

    //初始化数据
    dataForm.shereIdList1 = [] as string[];
    dataForm.shereIdList2 = [] as string[];
    dataForm.shereIdList3 = [] as string[];
    dataForm.shereIdList4 = [] as string[];
    dataForm.shereIdList5 = [] as string[];
    dataForm.shereIdList6 = [] as string[];
};

//领导
const taskleader = ref();

//业务员
const tasksalesman = ref();

//项目经理
const tskWork = ref();
const isListVisible = ref(false);

//工作人员
const tspersonnel = ref();

//组长
const tsgroup = ref();

//数据组
const tsdata = ref()


// 获取收藏夹信息
const getInfo = (id: number) => {
    baseService.get("/crm/crmdatafavorite/" + id).then((res) => {
        Object.assign(dataForm, res.data);
        //调用获取工作人员和工作人员列
        let data = res.data;
        let owner = res.data.shereIds;
        //领导
        dataForm.shereIdList1 = setOwner(taskleader.value, owner); //owner.split(",");
        //项目经理
        dataForm.shereIdList2 = setOwner(tskWork.value, owner);
        //组长
        dataForm.shereIdList3 = setOwner(tsgroup.value, owner);
        //数据组
        dataForm.shereIdList4 = setOwner(tsdata.value, owner);
        //工作人员
        dataForm.shereIdList5 = setOwner(tspersonnel.value, owner);
        //业务员
        dataForm.shereIdList6 = setOwner(tasksalesman.value, owner);
    });
};


// 判断已经保存的数据是否在列表中
const setOwner = (userList: [{ userId: null }], ownerStr: string) => {
    if (!ownerStr) {
      return [];
    }
    let ownerArr: string[] = ownerStr.split(",");
    if (ownerArr.length == 0 || userList == null) {
        return [];
    }
    //判断ownerArr是否存在于userList数组中，不存在的移除
    for (let i = 0; i < ownerArr.length; i++) {
        let isExist = false;
        for (let j = 0; j < userList.length; j++) {
            if (ownerArr[i] == userList[j].userId) {
                isExist = true;
                break;
            }
        }
        if (!isExist) {
            ownerArr.splice(i, 1);
            i--;
        }
    }
    return ownerArr;
};


//全选领导
const handleCheckAllChange1 = (val: boolean) => {
    dataForm.shereIdList1 = [];
    // 选中
    if (val) {
        for (let i = 0; i < taskleader.value.length; i++) {
            dataForm.shereIdList1.push(taskleader.value[i].userId);
        }
    } else {
        dataForm.shereIdList1 = [];
    }
}

//全选项目经理
const handleCheckAllChange2 = (val: boolean) => {
    dataForm.shereIdList2 = [];
    // 选中
    if (val) {
        for (let i = 0; i < tskWork.value.length; i++) {
            dataForm.shereIdList2.push(tskWork.value[i].userId);
        }
    } else {
        dataForm.shereIdList2 = [];
    }
}

//全选组长
const handleCheckAllChange3 = (val: boolean) => {
    dataForm.shereIdList3 = [];
    // 选中
    if (val) {
        for (let i = 0; i < tsgroup.value.length; i++) {
            dataForm.shereIdList3.push(tsgroup.value[i].userId);
        }
    } else {
        dataForm.shereIdList3 = [];
    }
}

//全选数据组
const handleCheckAllChange4 = (val: boolean) => {
    dataForm.shereIdList4 = [];
    // 选中
    if (val) {
        for (let i = 0; i < tsdata.value.length; i++) {
            dataForm.shereIdList4.push(tsdata.value[i].userId);
        }
    } else {
        dataForm.shereIdList4 = [];
    }
}

//全选工作人员
const handleCheckAllChange5 = (val: boolean) => {
    dataForm.shereIdList5 = [];
    // 选中
    if (val) {
        for (let i = 0; i < tspersonnel.value.length; i++) {
            dataForm.shereIdList5.push(tspersonnel.value[i].userId);
        }
    } else {
        dataForm.shereIdList5 = [];
    }
}

//全选工作人员
const handleCheckAllChange6 = (val: boolean) => {
    dataForm.shereIdList6 = [];
    // 选中
    if (val) {
        for (let i = 0; i < tasksalesman.value.length; i++) {
            dataForm.shereIdList6.push(tasksalesman.value[i].userId);
            console.log(dataForm.shereIdList6);

        }
    } else {
        dataForm.shereIdList6 = [];
    }
}



/**
* 获取工作人员和工作人员列表
*/
const shareList = () => {
    isListVisible.value = true;
    baseService.get("/sys/user/getExceptAdmin", {}).then((res) => {
        if (res.code !== 0) {
            return ElMessage.error(res.msg);
        }
        taskleader.value = res.data[1];
        tasksalesman.value = res.data[2];
        tskWork.value = res.data[3];
        tspersonnel.value = res.data[4];
        tsgroup.value = res.data[6];
        tsdata.value = res.data[7];
        // 在这里添加判断逻辑
        taskleader.value = taskleader.value && taskleader.value.length > 0 ? taskleader.value : null;
        tasksalesman.value = tasksalesman.value && tasksalesman.value.length > 0 ? tasksalesman.value : null;
        tskWork.value = tskWork.value && tskWork.value.length > 0 ? tskWork.value : null;
        tspersonnel.value = tspersonnel.value && tspersonnel.value.length > 0 ? tspersonnel.value : null;
        tsgroup.value = tsgroup.value && tsgroup.value.length > 0 ? tsgroup.value : null;
        tsdata.value = tsdata.value && tsdata.value.length > 0 ? tsdata.value : null;
        if (dataForm.id != null) {
          getInfo(dataForm.id);
        }
    });
}


// 表单提交
const dataFormSubmitHandle = () => {
    dataFormRef.value.validate((valid: boolean) => {
        if (!valid) {
            return false;
        }
        dataForm.shereIdList = Array.from(new Set([
            ...dataForm.shereIdList1,
            ...dataForm.shereIdList2,
            ...dataForm.shereIdList3,
            ...dataForm.shereIdList4,
            ...dataForm.shereIdList5,
            ...dataForm.shereIdList6
        ]));
        (!dataForm.id ? baseService.post : baseService.put)("/crm/crmdatafavorite", { dfvIfPublic: Number(dataForm.dfvIfPublic), dfvName: dataForm.dfvName, shereIdList: dataForm.shereIdList, dfvSource: dataForm.dfvSource, id: dataForm.id }).then((res) => {
            ElMessage.success({
                message: t("prompt.success"),
                duration: 500,
                onClose: () => {
                    visible.value = false;
                    emit("refreshDataList");
                }
            });
        });
    });
};

defineExpose({
    init
});
</script>
<style lang="scss" scoped>
.el-checkbox {
   width: 82px;
 }
</style>
